<template>
  <div>
    <Banner1 :info="baseInfo" @contact="handleContact" />
    <Banner2 :info="baseInfo" @contact="handleContact" />
    <Banner3 :info="baseInfo" @contact="handleContact" />
    <Banner4 />
  </div>
</template>
<script setup lang="ts">
import { publicSrc } from "@/utils/common";
import { serviceDetail } from "@/api/product";
const router = useRouter();
const route = useRoute();

import Banner1 from "@/views/mobile/product/components/Banner1.vue";
import Banner2 from "@/views/mobile/product/components/Banner2.vue";
import Banner3 from "@/views/mobile/product/components/Banner3.vue";
import Banner4 from "@/views/mobile/product/components/Banner4.vue";

const baseInfo = ref<any>({}); // 基础信息

// 监听路由参数变化
watch(
  () => route.query,
  (query) => {
    console.log(query);
    if (baseInfo.value.id && query?.id) {
      getDetail(query?.id);
    }
  },
  { immediate: true, deep: true }
);

onMounted(() => {
  if (route.query && route.query.id) {
    getDetail(route.query.id);
  }
});

// 详情
const getDetail = (id: any) => {
  serviceDetail(id).then((res: any) => {
    if (res.code === 200) {
      let data = res.data;
      data.image = publicSrc(data.image);
      data.image2 = publicSrc(data.image2);
      data.image3 = publicSrc(data.image3);
      data.image4 = publicSrc(data.image4);
      baseInfo.value = res.data;
    }
  });
};

// 咨询
const handleContact = (title: string) => {
  router.push({
    path: "/m/contact",
    query: {
      title: encodeURIComponent(title),
    },
  });
};
</script>
<style lang="scss" scoped></style>
